<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <input type="file" multiple> -->
  <input type="file">
  <hr>
  <img src="" alt="">

  <script>
    document.querySelector('input').onchange = function (e) {
      console.dir(e.target)
      if (e.target.files.length > 0) {
        // 1. 得到文件对象
        const fileObj = e.target.files[0]
        // 2. 文件对象的作用一：预览
        const url = URL.createObjectURL(fileObj)
        // console.log(url)
        // document.querySelector('img').src = url

        // 3. 文件对象的作用二：配合FormData，完成文件上传
        let fd = new FormData()
        fd.append('avatar', fileObj)
        // Ajax提交FormData即可实现文件上传

        // 4. 文件对象的作用三：通过FileReader对象，得到文件的base64格式
        // 4.1) 实例化FileReader对象
        const fr = new FileReader()
        // 4.2) 将文件对象转成base64格式
        fr.readAsDataURL(fileObj)
        // 4.3) 通过onload事件，监听转换是否完成
        fr.onload = function () {
          // 4.4) 转换完成，通过result属性得到base64格式的结果
          // console.log(fr.result)
          document.querySelector('img').src = fr.result
        }
      }
    }
  </script>
</body>

</html>